<template>
  <div class="login">
    <div class="head">
      <img
        @click="$router.push({ path: '/' })"
        src="img/login-logo.png"
        alt=""
      />
    </div>
    <div class="wrapper">
      <div class="contain">
        <div class="login-form">
          <h3>
            <span class="active">账号登录</span>
            <span class="line">|</span>
            <span>扫码登录</span>
          </h3>
          <div class="inp">
            <input v-model="username" type="text" placeholder="输入账号" />
          </div>
          <div class="inp">
            <input v-model="password" type="password" placeholder="输入密码" />
          </div>
          <div class="btn" @click="login">登录</div>
          <div class="tips">
            <div class="sms">手机短信登录/注册</div>
            <div class="reg" @click="dialogVisible = true">
              立即注册<span>|</span>忘记密码？
            </div>
          </div>
        </div>
      </div>
    </div>
    <footermi></footermi>
    <el-dialog title="注册" :visible.sync="dialogVisible" width="30%">
      <el-form :model="ureg" ref="form" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ureg.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ureg.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ureg.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="regist">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'login',
  data() {
    return {
      username: '',
      password: '',
      dialogVisible: false,
      ureg: {
        username: '',
        password: '',
        email: '',
      },
    }
  },
  methods: {
    async login() {
      let { username, password } = this
      console.log(username, password)
      let res = await this.axios.post('/user/login', {
        username,
        password,
      })
      this.$store.dispatch('changeUsername', res.username)
      // console.log(res)
      // if (res.status !== 0) return this.$message.error('登录失败')
      // window.sessionStorage.setItem('user', JSON.stringify(res))
      // sessionStorage.removeItem("user");
      this.$router.push({ path: '/' })
    },
    async regist() {
      let { username, password, email } = this.ureg
      if (username == '' || password == '') reutrn
      let  res  = await this.axios.post('/user/register', {
        username,
        password,
        email,
      })
      // console.log(res)
      this.resetForm()
    },
    resetForm() {
      console.log(this.$refs['form'].resetFields)
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },
  },

  mounted() {},
}
</script>
<style lang="scss">
.login {
  .head {
    width: 1226px;
    margin: auto;
    text-align: left;
    // padding-bottom: 14px;
    img {
      height: 113px;
      &:hover {
        cursor: pointer;
      }
    }
  }
  .wrapper {
    height: 576px;
    background-image: url(/img/login-bg.jpg);
    background-position-x: center;
    .contain {
      width: 1226px;
      height: 100%;
      margin: auto;
      position: relative;
      .login-form {
        box-sizing: border-box;
        position: absolute;
        right: 0;
        height: 510px;
        width: 410px;
        background-color: white;
        padding: 0 31px;
        top: 50%;
        transform: translateY(-50%);
        h3 {
          font-size: 24px;
          margin: 40px 0 49px;
          .line {
            margin: 0 32px;
          }
          .active {
            color: #f60;
          }
        }
        .inp {
          padding: 18px;
          margin-bottom: 20px;
          box-sizing: border-box;
          border: 1px solid #e5e5e5;
          input {
            border: 0px;
            width: 100%;
            height: 100%;
            font-size: 14px;
            outline: none;
          }
        }
        .btn {
          font-size: 16px;
          background-color: #f60;
          color: white;
          height: 50px;
          line-height: 50px;
        }
        .tips {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          .sms {
            color: #f60;
            &:hover {
              cursor: pointer;
            }
          }
          .reg {
            color: #999999;
            &:hover {
              cursor: pointer;
            }
            span {
              margin: 0 5px;
              cursor: default;
            }
          }
        }
      }
    }
  }
}
</style>